<!-- 导航栏 -->
<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container">
        <!-- 标志 -->
        <a href="#" class="navbar-brand" data-bs-toggle="modal" data-bs-target="#login">
            <h2>Awesome Album</h2>
        </a>
        <!-- 登录模态窗 -->
        {% if user.is_superuser %}
            <ul class="navbar-nav">
                <li class="nav-item">
                    <h2>
                        <a href="#" class="nav-link active" data-bs-toggle="modal"
                           data-bs-target="#upload">+</a>
                    </h2>
                </li>
            </ul>
        {% endif %}
    </div>
</nav>

<!-- 登出 -->
{% if user.is_superuser %}
    <div class="modal fade" id="login">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>确认退出账号吗？</p>
                    <form action="{% url 'home' %}" method="post">
                        {% csrf_token %}
                        <input type="text" id="isLogout" name="isLogout" value="True" hidden>
                        <button class="btn btn-danger" type="submit">Logout</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="upload">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title">上传图片</h5>
                    <form action="{% url 'photo:upload' %}" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="col py-2">
                            <input type="file" class="form-control" id="images" name="images"
                                   multiple="multiple" accept="image/*">
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% else %}
<!-- 登录 -->
    <div class="modal fade" id="login">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form action="{% url 'home' %}" method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username" name="username">
                        </div>
                        <div class="mb-3">
                            <label for="pwd" class="form-label">Password</label>
                            <input type="password" class="form-control" id="pwd" name="password">
                            <div id="passwordHelp" class="form-text">
                                We'll never share your password with anyone else.
                            </div>
                        </div>
                        <button class="btn btn-primary" type="submit">Login</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endif %}